<template>
  <!-- 图表容器，必须指定宽高 -->
  <div id="echartsCenter" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import * as echarts from 'echarts';
import {useStore} from 'vuex'
import api from '../utils/request'; // 导入配置好的实例

let myChart = ref(null);
let option=ref(null);
const store = useStore()
// 绘制图表
const drawChart = (echarts_map,province) => {
  const chartDom = document.getElementById('echartsCenter');
  myChart = echarts.init(chartDom);
  echarts.registerMap("china", echarts_map);
  option = {
    title: {
      text: "李白诗词分布地区图",
      subtext: "数据来源-古诗文网",
    },
    tooltip: {
      formatter: function (params) {
        // 检查params.data.name是否存在
        if (params.data && params.data.name && typeof params.data.value !== "object") {
          // 修改返回的字符串
          return (
              "点击的地点是" +
              params.data.name +
              "，作诗数目为：" +
              params.data.value
          );
        } else if (params.data && params.data.name) {
          return params.data.name
        } else {
          return "未知地点";
        }
      },
    },
    geo: {
      center: [105.5, 32.5],
      map: "china",
      roam: true,
      width: '90%',
      height: '110%',
      emphasis: {
        itemStyle: {
          name: "内蒙古",
          areaColor: "#e8e554",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 1,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        geoIndex: 0,
        type: "map",
        map: "china", // 引入地图数据
        data: province,
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: null,
        symbol: "circle",
        symbolSize: 10,
      }
    ],
    visualMap: {
      left: "right",
      min: 0,
      max: 143,
      inRange: {
        color: [
          "#ffe5db",
          "#ff9985",
          "#f57567",
          "#e64546",
          "#b80909",
        ],
      },
      text: ["High", "Low"],
      calculable: true,
    },
  };
  myChart.on("click", function (params) {
    console.log(params.data.name);
    // 使用 mutation 修改
    // store.commit('SET_TARGET_VARIABLE', params.data.name )

    // 或者使用 action (推荐异步操作)
    store.dispatch('updateVariable', params.data.name)
  })
  option && myChart.setOption(option);
}



// GET 请求
const fetchData=async ()=> {
  try {
    const response = await api.get('/api/greet', {
      params: { name: 'John', age: 30 }
    });
    console.log('GET 响应:', response);
    return response;
  } catch (error) {
    console.error('GET 错误:', error);
  }
}

const submitData=  async()=> {
  try {
    const payload = { name: 'John', age: 30 };
    const response = await api.post(
        '/api/greet',
        payload, // 请求体数据
        { headers: { 'Content-Type': 'application/json' } } // 请求头
    );
    return response;
    console.log('POST 响应:', response);
  } catch (error) {
    console.error('POST 错误:', error);
  }
}
//在组件初始化的时候执行
onMounted(async () => {
  const {echarts_map,province} = await submitData();
  drawChart(echarts_map,province);
});

</script>

<style scoped>
</style>
